<template>
	<div class="container">
		<headerbox :title="title"></headerbox>
		<div class="context">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>修改密码</span>
				</div>
				<div class="inputContainer">
					<el-form label-position="right" label-width="120px" :model="ruleForm" :rules="rules" status-icon
						ref="ruleForm">
						<p>密码必须含有大小写字母、数字，且长度在 8 到 16 之间。</p>
						<el-form-item label="旧密码" prop="oldpassword">
							<el-input ref="oldpassword" type="password" placeholder="请输入内容" class="inputbox"
								v-model="ruleForm.oldpassword" show-password clearable>
							</el-input>
						</el-form-item>
						<el-form-item label="新密码" prop="newpassword">
							<el-input ref="newpassword" type="password" placeholder="请输入内容" class="inputbox"
								v-model="ruleForm.newpassword" show-password clearable>
							</el-input>
						</el-form-item>
						<el-form-item label="再次输入新密码" prop="checkpassword">
							<el-input ref="checkpassword" type="password" placeholder="请输入内容" class="inputbox"
								v-model="ruleForm.checkpassword" show-password clearable>
							</el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="change">确认</el-button>
						</el-form-item>
					</el-form>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script>
	import headerbox from './head.vue'
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else if (this.ruleForm.oldpassword === value) {
					callback(new Error('新密码与旧密码不可一致'));
				} else {
					callback()
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.ruleForm.newpassword) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				title: '修改密码',
				ruleForm: {
					oldpassword: '',
					newpassword: '',
					checkpassword: ''
				},
				rules: {
					oldpassword: [{
							required: true,
							message: '请输入内容',
							trigger: 'blur'
						},
						{
							min: 8,
							max: 16,
							message: '长度在 8 到 16 个字符',
							trigger: 'blur'
						},
						{
							required: true,
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
							message: '密码必须含有大小写字母、数字，且长度在 8 到 16 之间',
							trigger: 'blur'
						}
					],
					newpassword: [{
							validator: validatePass,
							trigger: 'blur'
						}, {
							min: 8,
							max: 16,
							message: '长度在 8 到 16 个字符',
							trigger: 'blur'
						},
						{
							required: true,
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
							message: '密码必须含有大小写字母、数字，且长度在 8 到 16 之间',
							trigger: 'blur'
						}
					],
					checkpassword: [{
							validator: validatePass2,
							trigger: 'blur'
						}, {
							min: 8,
							max: 16,
							message: '长度在 8 到 16 个字符',
							trigger: 'blur'
						},
						{
							required: true,
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
							message: '密码必须含有大小写字母、数字，且长度在 8 到 16 之间',
							trigger: 'blur'
						}
					],
				}, //输入规则
			}
		},
		methods: {
			change() {
				this.$confirm('是否修改密码', '确认修改密码', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					// 判断是否为空
					// 判断旧密码是否正确
					// 判断新旧密码是否一样
					// 判断新密码是否符合标准
					// 判断两次密码是否相同
					// 发送后台审核
					// 成功后需重新登录
					let aug = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
					if (this.ruleForm.oldpassword == '' && this.ruleForm.newpassword == '' &&
						this.ruleForm.checkpassword == '') {
						this.$message({
							message: '请输入内容',
							type: 'error'
						})
					} else if (this.ruleForm.oldpassword == this.ruleForm.newpassword) {
						this.$message({
							message: '新旧密码相同，请修改',
							type: 'error'
						})
					} else if (this.ruleForm.newpassword != this.ruleForm.checkpassword) {
						this.$message({
							message: '输入的新密码不一致，请修改',
							type: 'error'
						})
					} else if (!aug.test(this.ruleForm.oldpassword) && !aug.test(this.ruleForm.newpassword) &&
						!aug.test(this.ruleForm.checkpassword)) {
						this.$message({
							message: '请输入正确格式的密码',
							type: 'error'
						})
					} else {
						this.$message({
							message: '修改成功',
							type: 'success'
						})
						this.ruleForm.oldpassword=''
						this.ruleForm.newpassword=''
						this.ruleForm.checkpassword=''
					}

				}).catch(() => {
					this.$message({
						message: '已取消',
						type: 'info'
					})
				})
			}
		},
		components: {
			headerbox
		}
	}
</script>

<style>
	.container {
		display: flex;
	}

	.container .context {
		flex: 1;
	}

	.inputContainer {
		float: left;
		width: 600px;
		padding: 15px;
	}

	.inputbox {
		width: calc(25vw);
		margin-bottom: 5px;
		line-height: 38px;
		padding-right: -7px;
	}
</style>
